<template>
  <transition name="fade-opacity">
    <div @click.self="clickClose" v-show="showAttentionQr" class="c-pf c-p-t0 c-pz10000 c-maxw640 c-w100 c-h c-flex-column c-flex-center c-translucent-balck50">
      <div class="qr-code">
        <img v-if="imgurl" class="c-w100 app-save-img" :src="$addXossFilter(imgurl)" />
        <div v-else class="c-w100 c-hh350 c-bg-white"></div>
      </div>
      <div @click="clickClose" class="c-pt30">
        <img class="c-ww60 c-center" src="@/assets/i/wap/index/btn_close.png" />
      </div>
    </div>
  </transition>

</template>

<script>
import { mapState } from "vuex";
let getCount = 0; //尝试重新获取二维码次数
export default {
  name: 'attentionQrCode',
  data() {
    return {
      imgurl: '',
    }
  },
  computed: {
    ...mapState({
      showAttentionQr: state => state.oem_store.showAttentionQr,
    })
  },
  beforeCreate() {

  },
  created() {
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      let qrImg = localStorage.getItem(`gzqr${localStorage.getItem("companyId")}`)
      if (qrImg) {
        this.imgurl = qrImg;
        getCount = 0;
        return;
      }
      //尝试重新获取超过3次不再重试
      if (getCount >= 3) {
        return;
      }
      getCount++;
      setTimeout(() => {
        this.initData();
      }, 2000);
    },
    clickClose() {
      this.$store.commit('updateShowAttentionQr', false);
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.qr-code {
  width: 70%;
  padding: 0.25rem;
  border-radius: 3px;
  background-color: #fff;
  margin: 0 auto;
}
</style>
